<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div id="bollAndCci" style="width: 1800px;height: 800px"></div>
</body>
<script src="../static/js/echarts-all.js"></script>
<script src="../static/js/jq.js"></script>
<script>
    $(function () {
        $.ajax({
            url: "cci"
            , method: "post"
            , data: {}
            , cache: false
            , dataType: "json"
            , success: function (res) {
                bollAndCci(res);
            }
            , error: function (e) {
                console.error(e)
            }
        });
    })

    function bollAndCci(param) {
        let bollAndCci = echarts.init($("#bollAndCci")[0]);
        let _x = [];
        let up_y = [];
        let dn_y = [];
        let mb_y = [];
        let mo_y = [];
        let cci_y = [];
        let length = param.mb.length;
        for (var index in param.mb) {
            _x.push(param.mb[length - index - 1].date);
            cci_y.push(param.cci[length - index - 1].data);
            mo_y.push(param.mo[length - index - 1].data);
            mb_y.push(param.mb[length - index - 1].data);
            up_y.push(param.up[length - index - 1].data);
            dn_y.push(param.dn[length - index - 1].data);
        }
        option = {
            title: {
                text: '',
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['cci', 'mo', 'mb', 'up', 'dn']
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: _x,
                    axisLabel: {
                        interval: 0,
                        rotate: 90
                    }
                }
            ],
            // dataZoom: [{
            //     type: 'slider',//图表下方的伸缩条
            //     show: true, //是否显示
            //     realtime: true, //拖动时，是否实时更新系列的视图
            //     start: 0,
            //     end: 100,
            // }],
            yAxis: [
                {
                    type: 'value',
                    // minInterval: 100,

                    // axisLabel: {
                    //     formatter: '{value}'
                    // }
                },
                {
                    type: 'value',
                },
                {
                    type: 'value',
                },
                {
                    type: 'value',
                },
                {
                    type: 'value',
                }
            ],
            series: [
                {
                    name: 'cci',
                    type: 'line',
                    data: cci_y,
                    smooth: true,
                    markLine: {
                        /*symbol:"none",               //去掉警戒线最后面的箭头
                        label:{
                            position:"end"   ,       //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                        },*/
                        data: [{
                            silent: false,             //鼠标悬停事件  true没有，false有
                            lineStyle: {               //警戒线的样式  ，虚实  颜色
                                type: "solid",
                                color: "#3398DB",
                            },
                            label: {
                                position: 'end',
                                formatter: "超买区(100)"
                            },
                            yAxis: 100

                        },
                            {
                                silent: false,             //鼠标悬停事件  true没有，false有
                                lineStyle: {               //警戒线的样式  ，虚实  颜色
                                    type: "solid",
                                    color: "#FA3934",

                                },
                                label: {
                                    position: 'end',
                                    formatter: "超卖区(-100)",
                                },
                                yAxis: -100           // 警戒线的标注值，可以有多个yAxis,多条警示线   或者采用   {type : 'average', name: '平均值'}，type值有  max  min  average，分为最大，最小，平均值

                            }
                        ]
                    }
                },
                {
                    name: 'mo',
                    type: 'line',
                    data: mo_y,
                    smooth: true
                },
                {
                    name: 'up',
                    type: 'line',
                    smooth: true,
                    data: up_y
                },
                {
                    name: 'mb',
                    type: 'line',
                    smooth: true,
                    data: mb_y
                },
                {
                    name: 'dn',
                    type: 'line',
                    smooth: true,
                    data: dn_y
                }
            ]
        };
        bollAndCci.setOption(option);
    }
</script>
</html>